<template>
  <div class="grid-view" ref="GridView">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "GridView",
  props: {
    // 每行个数
    cols: {
      type: Number,
      default: 2
    },
    // 大网格上下边距
    hPadding: {
      type: Number,
      default: 8
    },
    // 大网格左右边距
    wPadding: {
      type: Number,
      default: 8
    },
    // 每个小格距离
    itemSpace: {
      type: Number,
      default: 8
    },
    // 每行距离
    lineSpace: {
      type: Number,
      default: 8
    }
  },
  methods: {
    autoLayout() {
      // 获取大网格
      const gridEL = this.$refs.GridView
      // 获取小格子
      const children = gridEL.children
      // 设置大网格的内边距
      gridEL.style.padding = `${this.hPadding}px ${this.wPadding}px`

      // 获取小格子的宽度
      // (大网格的宽度 - 大网格内边距 - (格子的数量 - 1) * 格子间的距离)  / 每行小格子个数
      let itemWidth = (gridEL.clientWidth - this.wPadding*2 - (this.cols - 1) * this.itemSpace) / this.cols
      for (let i = 0 ; i < children.length ; i++){
        let item = children[i]
        // 给小格子设置宽度
        item.style.width = itemWidth + 'px'
        if((i+1)%this.cols !== 0)
          // 最后一个格子不设置外边距
        item.style.marginRight = this.itemSpace + 'px'
        if(i >= this.cols)
          // 换行之后的格子设置上边距
          item.style.marginTop = this.lineSpace + 'px'
      }
    },
  },
  mounted(){
    // dom挂载更新布局
    setTimeout(this.autoLayout, 20)
  },
  updated() {
    // 数据加载更新布局
    this.autoLayout()
  }
}
</script>

<style scoped>
.grid-view{
  display: flex;
  flex-wrap: wrap;
}
</style>
